{% extends 'layout.html' %}


{% block head %}

{% endblock %}


{% block main %}
<div class="row justify-content-center align-items-center">
    <div class="col-8">
        <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
            <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
                <path
                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
            </symbol>
        </svg>
        <div id="message" class="d-none">
            <div class="alert alert-success d-flex align-items-center alert-dismissible fade show" role="alert">
                <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:">
                    <use xlink:href="#check-circle-fill" />
                </svg>
                <div>
                    我在购物车等你哦！
                </div>
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
        <div class="d-flex my-3">
            <img class="cover" src="{{book.cover}}" alt="封面" />
            <div class="ms-2">
                <p class="h3">{{ book.name }}</p>
                <p class="my-4"> <span class="text-muted">作者：</span> {{book.author.username}}</p>
                {% if is_paid %}
                <button class="btn btn-success">已购买</button>
                {% else %}
                <div class="row align-items-center">
                    <span class="text-danger mb-0">&yen;<span class="h3 mb-0">{{ book.price }}</span></span>
                    <button class="btn btn-primary mt-3 ms-2" onclick="addToCart()">加入购物车</button>
                </div>
                {% endif %}
            </div>
        </div>


        <h2>介绍</h2>
        <p>{{book.description}}</p>
        <h2>内容</h2>
        {% if is_paid %}
        <p>{{book.content}}</p>
        {% else %}
        <div class="alert alert-warning" role="alert">
            你需要购买才能阅读。
        </div>
        {% endif %}

    </div>
</div>
{% endblock %}

{% block script %}
<script>
    function addToCart() {
        $.ajax({
            url: "addtocart/",
            method: 'get',
            success: function (data, status) {

                $("#message").removeClass('d-none');
                setTimeout(() => {
                    $("#message").addClass('d-none');
                }, 3000);
            },
            error: function (res) {
                if(res.status = 403){
                    window.location.href='/signin/';
                }
            }
        })
    }
</script>
{% endblock %}